<template>
    <!-- 首页网格布局 -->
    <div class="home-grid">
      <van-grid :column-num="5" square :gutter="5">
        <!-- 遍历菜单列表生成网格项 -->
        <van-grid-item v-for="list in menulist" :key="list.text">
          <van-image :src="list.url" width="50" height="50" />
          <span>{{ list.text }}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </template>
  
  <script setup>
  // 首页功能按钮
  import menu1 from '../assets/images/menu1.png'
  import menu2 from '../assets/images/menu2.png'
  import menu3 from '../assets/images/menu3.png'
  import menu4 from '../assets/images/menu4.png'
  import menu5 from '../assets/images/menu5.png'
  import menu6 from '../assets/images/menu6.png'
  import menu7 from '../assets/images/menu7.png'
  import menu8 from '../assets/images/menu8.png'
  import menu9 from '../assets/images/menu9.png'
  import menu10 from '../assets/images/menu10.png'
  
  // 定义菜单列表，包含文本和图片链接
  const menulist = [
    { text: '今日爆款', url: menu1 },
    { text: '好物分享', url: menu2 },
    { text: '推荐购买', url: menu3 },
    { text: '购物心得', url: menu4 },
    { text: '直播专区', url: menu5 },
    { text: '签到中心', url: menu6 },
    { text: '每日优惠', url: menu7 },
    { text: '值得购买', url: menu8 },
    { text: '充值中心', url: menu9 },
    { text: '我的客服', url: menu10 }
  ]
  </script>
  
  <style lang="less" scoped>
  /* 首页网格样式 */
  .home-grid {
    .van-image {
      margin-bottom: 5px;
    }
    span {
      font-size: 12px;
      text-align: center;
    }
  }
  </style>
  